<template>
<div class="AllBookContainer">
<div v-for="book in data" :key="book.id">
  <Book
    :id="book.id"
    :isbn="book.isbn"
    :name="book.name"
    :press="book.press"
    :price="book.price"
    :type="book.type"
  />
</div>
</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import Book from "@/components/Book";

const props = defineProps({
  type: {
    required: true
  },
  keyword: {
    required: false
  }
})

const data = ref()

const getAll = () => {
  switch (props.type) {
    case 'all': {
      axios.get('/api/book/getAll')
          .then((res) => {
            data.value = res.data
          })
      break;
    }
    case 'computer': {
      axios.get('/api/book/getType/计算机')
          .then((res) => {
            data.value = res.data
          })
      break;
    }
    case 'novel': {
      axios.get('/api/book/getType/小说')
          .then((res) => {
            data.value = res.data
          })
      break;
    }
    case 'search': {
      axios.get(`/api//book/getBookByKetWord/${props.keyword}`)
          .then((res) => {
            data.value = res.data
          })
    }
  }

}

onMounted(() => {
  getAll();
  console.log(data)
})

</script>

<style scoped>
.AllBookContainer{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>